import React, { useState } from 'react';
import { ReactDOM } from 'react-dom';
import {
  Input,
  DatePicker,
  InputNumber,
  Form,
  Row,
  Col,
  Button,
  Icon,
  Select,
  TreeSelect,
} from 'antd';
import moment, { Moment } from 'moment';

import styles from './index.less';

const BaseForm = (props) => {
  const [expand, setExpand] = useState(false);
  const { formItems,formLayout = 'horizontal', formItemLayout = null } = props;

  const search = () => {
    const data = form.getFieldsValue();
    // 找到时间字段
    Object.keys(data).forEach((i) => {
      if (i.indexOf('$btw') !== -1 || i.indexOf('$BTW') !== -1) {
        if (data[i]) {
          const formatDate = data[i].map((e) =>
            moment(e).format('YYYY-MM-DD HH:mm:ss'),
          );
          data[i] = formatDate.join(',');
        }
      }
    });
    props.search(data);
  };

  const renderItem = (type, label, itemProps, item) => {
    if (type === 'string') {
      return <Input placeholder={`请输入${label}`} />;
    }
    if (type === 'password') {
      return <Input placeholder={`请输入${label}`}  type='password' />;
    }
    if (type === 'list') {
      const list = itemProps?.data || [];
      return (
        <Select mode={itemProps?.mode || 'multiple'}>
          {list.map((item) => (
            <Select.Option value={item.id || item} key={item.id || item}>
              {item.name || item}
            </Select.Option>
          ))}
        </Select>
      );
    }
    if (type === 'dateTime') {
      return <DatePicker showTime style={{ width: '100%' }} />;
    }
    if (type === 'dateRange' || type === 'time') {
      return <DatePicker.RangePicker showTime style={{ width: '100%' }} />;
    }
    if (type === 'dateTimeRange') {
      return (
        <DatePicker.RangePicker
          style={{ width: '100%' }}
          showTime={{ format: 'HH:mm' }}
          format="YYYY-MM-DD HH:mm"
          placeholder={['开始时间', '结束时间']}
        />
      );
    }
    if (type === 'number') {
      return (
        <InputNumber style={{ width: '100%' }} placeholder={`请输入${label}`} />
      );
    }
    if (type === 'treeSelect') {
      return (
        <TreeSelect
          dropdownStyle={itemProps?.dropdownStyle}
          allowClear
          treeDataSimpleMode
          showSearch={itemProps?.showSearch || false}
          multiple={itemProps?.multiple || false}
          placeholder={`${label}`}
          treeData={itemProps?.data || []}
          treeNodeFilterProp="title"
        />
      );
    }
    if (type === 'custom' || type === 'dynamic') {
      return item.components;
    }
    return <Input />;
  };
  return (
    <Form
      form={props.form}
      {...formItemLayout}
      layout={formLayout}
      onKeyDown={(e) => {
        if (e.keyCode === 13) {
          props.search();
        }
      }}
      className={styles.antAdvancedSearchForm}
    >
      <div>
        {formItems.map((item, index) => (
            <Form.Item
              key={`${index}`}
              label={item.label}
              initialValue={item?.value}
              name={item.key}
              rules={item?.ruleList?.length > 0 && item?.ruleList}
            >
              {renderItem(item.type, item.label, item.props, item)}
            </Form.Item>
        ))}
      </div>
    </Form>
  );
};

export default BaseForm;
